<template>
    <div class="achievementDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/achievementYear'}">业绩激励-年</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/achievementYearDetail',query:{allotYearId:ruleForm.allotYearId,year:this.ruleForm.year}}">员工分配表</el-breadcrumb-item>
            <el-breadcrumb-item>年终奖分配明细表</el-breadcrumb-item>
        </el-breadcrumb>

        <h3>{{ruleForm.year}}年好生活员工分配表</h3>
        <el-table :data="tableData" class="mt20" border style="width: 100%">
            <el-table-column prop="date" label="序号" width="80" align="center" fixed :formatter="inittotal"></el-table-column>
            <el-table-column prop="staffCode" label="工号" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0">{{scope.row.staffCode}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="stationCode" label="岗位id" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0">{{scope.row.stationCode}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="stationName" label="岗位名称"  width="120" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0">{{scope.row.stationName}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="departmentCode" label="对应部门id" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0">{{scope.row.departmentCode}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="对应部门名称"  width="120" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.departmentName}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="standardWeight" label="岗位标准权重" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.standardWeight}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="departShouldProportion" label="部门应发占比" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.departShouldProportion}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="standardProportion" label="标准占比（‰）" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.standardProportion}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="standardAmount" label="标准金额(元)"  width="160" align="center">
                <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.standardAmount}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="topTenItemProportion " label="十大事项完成情况（%）" width="100" align="center">
                 <template  slot-scope="scope">
                    <el-input size="small" v-model="scope.row.topTenItemProportion" v-if="scope.$index !==0" placeholder="请输入内容"  @input.native="checkNum(scope.row.topTenItemProportion,scope.$index,'topTenItemProportion')" @blur="blurchange(scope.row,scope.$index,'topTenItemProportion')"></el-input>
                    <span v-else>——</span>
                </template>
            </el-table-column>
            <el-table-column prop="afterAdjustProportion" label="调整后比例" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.afterAdjustProportion}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="afterAdjustAmount " label="调整后的标准金额" width="120" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.afterAdjustAmount}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>

            <el-table-column prop="topTenItemBalance " label="十大事项余额"  width="120" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.topTenItemBalance}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="organizStartTime " label="编制生效时间"  width="245" align="center">
               <template  slot-scope="scope">
                     <el-date-picker
                        v-if="scope.$index !==0" 
                       v-model="scope.row.organizStartTime"
                       type="date"
                       :picker-options="pickerOptions0"
                       @change="blurchange(scope.row,scope.$index,'organizStartTime')"
                       placeholder="选择编制生效时间">
                     </el-date-picker>
                     <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="organizEndTime " label="编制结束时间"  width="245" align="center">
               <template  slot-scope="scope">
                        <el-date-picker
                          v-if="scope.$index !==0"
                          v-model="scope.row.organizEndTime"
                          type="date"
                          :picker-options="pickerOptions1"
                          @change="blurchange(scope.row,scope.$index,'organizEndTime')"
                          placeholder="选择编制结束时间">
                        </el-date-picker>
                        <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="organizEffectDays " label="编制有效天数" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.organizEffectDays }}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="stationState " label="是否在岗" align="center" width="180">
               <template  slot-scope="scope">
                    <el-radio-group v-if="scope.$index !==0" v-model="scope.row.stationState" @change="blurchange(scope.row,scope.$index,'stationState')" >
                          <el-radio :label="0">在岗</el-radio>
                          <el-radio :label="1">不在岗</el-radio>
                    </el-radio-group>
                    <p style="text-align: center" v-else>——</p> 
                </template>
            </el-table-column>
            <el-table-column prop="stationStartTime " label="在编开始时间" width="140" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.stationStartTime? scope.row.stationStartTime.substring(0,11):''}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="stationEndTime " label="离岗时间" width="140" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.stationEndTime? scope.row.stationEndTime.substring(0,11):''}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="stationEffectDays " label="实际在岗天数" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0">{{scope.row.stationEffectDays}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="actualAmount" label="实际金额(元)"  width="150" :formatter="initCash" align="center">
            </el-table-column>
            <el-table-column prop="standardBalance" label="标准余额（元）"  width="150" :formatter="initCash" align="center">
            </el-table-column>
            <el-table-column prop="adjustAmount" label="调整金额（元）"  align="center" width="180">
                 <template  slot-scope="scope">
                    <el-input size="small" v-model="scope.row.adjustAmount" v-if="scope.$index !==0" placeholder="请输入内容"  @input.native="checkNum(scope.row.adjustAmount,scope.$index,'adjustAmount')" @blur="blurchange(scope.row,scope.$index,'adjustAmount')"></el-input>
                    <span v-else>{{scope.row.adjustAmount | initCash2}}</span>
                 </template>
            </el-table-column>
            <el-table-column prop="adjustProportion" label="调整比例(%)" align="center">
               <template  slot-scope="scope">
                    <p v-if="scope.$index !==0" >{{scope.row.adjustProportion}}</p>
                    <p v-else>——</p>
                </template>
            </el-table-column>
            <el-table-column prop="realAmount" label="实发金额"  width="160" :formatter="initCash" align="center">
            </el-table-column>
        </el-table>
        <div class="pagebar">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :current-page.sync="ruleForm.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="ruleForm.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalSize">
          </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    export default {
        data() {
            var checkadjustedAmount = (rule, value, callback) => {
                let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
                if (!reg.test(value)) {
                    callback(new Error('只能输入保留两位小数的数字'));
                } else {
                    callback();
                }
            }
            return {
                currentitem:{},//当前修改的item
                tableData: [],
                ruleForm:{
                    staffName:undefined,
                    pageNum: 0,
                    pageSize: 10,
                    allotYearId:undefined,
                    year:undefined,
                },
                ruleForm2:{},
                totalSize:0,
                centerDialogVisible:false,
                pickerOptions0: {
                    disabledDate: (time) => {
                        return time > new Date(this.currentitem.organizEndTime) || time< new Date(this.ruleForm.year + '/1/1')|| time > new Date(this.ruleForm.year + '/12/31');
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return time < new Date(this.currentitem.organizStartTime) || time > new Date(this.ruleForm.year + '/12/31') || time< new Date(this.ruleForm.year + '/1/1')
                    }
                },
                rules:{
                    stationState:[
                        {required:true, message:'请选在岗状态',trigger:'blur'}
                    ],
                    adjustAmount:[
                        {required:true, message:'请输入调整金额',trigger:'blur'},
                        {validator: checkadjustedAmount, trigger: 'blur'}
                    ],
                    topTenItemProportion:[
                        {required:true, message:'请输入十大事项的完成情况',trigger:'blur'},
                        {validator: checkadjustedAmount, trigger: 'blur'}
                    ],
                    organizStartTime:[
                        {required:true, message:'请选编制开始时间',trigger:'blur'}
                    ],
                    organizEndTime:[
                        {required:true, message:'请选编制结束时间',trigger:'blur'}
                    ]
                },
            }
        },
        created() {
            this.ruleForm.allotYearId = this.$route.query.allotYearId
            this.ruleForm.year = this.$route.query.year
            this.getlist()
        },
        filters:{
            initCash2(cellValue){
                if(cellValue !== 0){
                    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                }
                if(cellValue == 0){
                    return "0.00"
                }
            },
        },
        methods: {
            checkNum(val,index,type){
                let value = (val.toString().match(/^\d*(\.?\d{0,2})/g)[0])
                this.$nextTick(()=>{
                   this.tableData[index][type] = value
                })  
            },
            blurchange(row,index,type){
                this.currentitem = row
                this.$nextTick(()=>{
                    //十大完成事项
                    if (type == 'topTenItemProportion') {
                        if (row[type]>100) {
                             this.tableData[index][type] = 100
                        }else if (row[type]=='' && row[type]!==0) {
                            this.tableData[index][type] = 0
                        }
                    }else if(type=="organizStartTime" || type=="organizEndTime"){
                        this.tableData[index][type] =  this.getTimeString(row[type])
                    }else {
                        this.tableData[index][type] = row[type]
                    }

                    if (new Date(this.tableData[index].organizEndTime) < new Date(this.tableData[index].organizStartTime)) {
                      this.$message({
                          message: '编织生效时间不能大于编织结束时间',
                          type: 'warning'
                      });
                      return
                    }

                    let obj = {}
                    obj['detailId'] = row.id
                    if (type == 'topTenItemProportion') {
                        obj['tenItemProportion'] =this.tableData[index][type]
                    }else {
                        obj[type] = this.tableData[index][type]
                    }
                    this.axios.post(api.GETREYEARLISTADJUST,obj).then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: '调整成功',
                                type: 'success'
                            });
                            this.centerDialogVisible = false;
                            this.currentitem = {}
                            this.getlist()
                        }
                    }).catch(res2=>{
                        this.currentitem = {}
                        this.getlist()
                    })
                })  
            },
            editinfo(val){
                this.centerDialogVisible = true
                this.ruleForm2 = JSON.parse(JSON.stringify(val));
            },
            specialTimeChange (val) {
                 this.ruleForm2.organizStartTime = val ? new Date(val).getTime() : undefined
            },
            specialTimeChange2 (val) {
                 this.ruleForm2.organizEndTime = val ? new Date(val).getTime() : undefined
            },
            inittotal(row, column, cellValue, index){
                if(index == 0){
                    return '合计';
                }
                return index
            },
            initCash(row, column, cellValue, index){
                if (!cellValue && cellValue !== 0) {
                    return '——'
                }
                if(cellValue !== 0){
                    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                }
                if(cellValue == 0){
                    return "0.00"
                }
            },
            exportReport(){

            },
            adjustReport(){
                this.$router.push({path:'/achievementYearDetailChange',query:{allotYearId:this.ruleForm.allotYearId,year:this.ruleForm.year}})
            },
            searchList(){
                this.ruleForm.pageNum = 1
                this.getlist()
            },
            handleCurrentChange(){
                this.getlist()
            },
            handleSizeChange(val){
                this.ruleForm.pageSize = val
                this.getlist();
            },
            getTimeString(timestamp){
                const time = new Date(timestamp)
                let dateStr = ''
                const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                dateStr = year + '-' + month + '-' + day
                let timeStr = ''
                const hours = time.getHours() //当前小时数（ 0-23）
                const hh = String(hours).length === 1 ? '0' + hours : hours
                const minutes = time.getMinutes()//当前分钟 （0-59）
                const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                const seconds = time.getSeconds() //当前秒数 （0-59）
                const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                timeStr = `${hh}:${mm}:${ss}`
                return dateStr + ' ' + timeStr
            },
            getlist(){
                this.axios.post(api.GETREYEARDETAILIST, this.ruleForm).then((res) => {
                    this.tableData = res.data.data.data;
                    this.tableData.unshift(res.data.data.totalData)
                    this.totalSize = res.data.data.total;
                })
            },

        }
    }
</script>

<style lang="stylus">

    .achievementDetail a 
        text-decoration: none 
        
</style>
